<template>
  <div class="article">
    <div class="content">
      <h2 class="title">{{ questionTitle }}</h2>
      <div class="collect">
        <span @click="collect">{{ ifcollect ? '已收藏' : '加收藏' }}</span>
      </div>
      <div class="timeAndType">
        <span class="time">{{ createdAt }}</span>
        <span class="type">{{ questionType }}</span>
        <span class="looknum">浏览量：{{ lookNum }}</span>
      </div>
      <div class="author">收集者：面试指南平台管理员</div>
      <div class="answer markdown-body" v-html="questionAnswer"></div>
    </div>
    <div class="sideCard">
      <side-card
        :hotList="hotList"
        @goHotDetail="goHotQuestionDetail"
      ></side-card>
    </div>
  </div>
</template>

<script>
import {
  getQuestionDetail,
  collectQuestion,
  noCollectQuestion,
  getHostQuestions
} from '@/api/api'
import SideCard from '@/components/SideCard.vue'
export default {
  inject: ['routerRefresh'],
  components: {
    SideCard
  },
  data() {
    return {
      questionTitle: '',
      questionAnswer: '',
      createdAt: '',
      questionType: '',
      collectText: '加收藏',
      ifcollect: false,
      lookNum: 0,
      hotList: []
    }
  },
  watch: {
    $route(to, from) {
      //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
      console.log(this.$route.query)
      this.routerRefresh()
    }
  },
  watch: {
    $route(to, from) {
      //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
      console.log(this.$route.query);
      this.routerRefresh()
    },
  },
  created() {
    console.log(this.$route.params.id)
    const data = {
      questionId: this.$route.params.id,
      userId: this.$store.getters.getUserInfo.id
    }
    getQuestionDetail(data).then((res) => {
      const data = res.data.data
      this.questionTitle = data.questionTitle
      this.questionAnswer = data.questionAnswer
      this.createdAt = data.createdAt
      this.questionType = data.questionType
      this.ifcollect = data.collect
      this.lookNum = data.lookNum
      console.log(data)
    })
    getHostQuestions().then((res) => {
      this.hotList = res.data.data
    })
  },
  methods: {
    goHotQuestionDetail(item) {
      this.$router.push({
        path: `/questionsDetail/${item.id}`
      })
    },
    collect() {
      let data = {
        userId: this.$store.getters.getUserInfo.id,
        questionId: Number(this.$route.params.id)
      }
      if (this.ifcollect) {
        noCollectQuestion(data).then((res) => {
          this.ifcollect = false
          console.log(res)
        })
      } else {
        collectQuestion(data).then((res) => {
          this.ifcollect = true
          console.log(res)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  width: 1200px;
  margin: 0 auto;
  margin-top: 76px;
  display: flex;
  justify-content: space-between;
  .content {
    min-height: 600px;
    width: 900px;
    background-color: #fff;
    padding: 35px 24px;
    .title {
      font-size: 24px;
      font-weight: 500;
    }
    .collect {
      display: flex;
      justify-content: flex-end;
      span {
        font-size: 12px;
        height: 16px;
        padding: 6px 6px;
        line-height: 16px;
        font-weight: 500;
        color: #00aae6;
        text-align: left;
        display: inline-block;
        background-color: #f4f8fa;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
    .timeAndType {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .time {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        font-weight: 500;
        color: #999;
        text-align: left;
      }
      .type {
        font-size: 12px;
        height: 16px;
        padding: 6px 6px;
        line-height: 16px;
        font-weight: 500;
        color: #666;
        text-align: left;
        display: inline-block;
        background-color: #f4f8fa;
        margin-left: 10px;
      }
      .looknum {
        font-size: 12px;
        margin-left: 12px;
        color: #666;
      }
    }
    .author {
      font-size: 14px;
      height: 24px;
      line-height: 24px;
      font-weight: 500;
      color: #666;
      text-align: left;
      height: auto;
      box-sizing: border-box;
      padding: 14px;
      margin-top: 20px;
      background-color: #f4f8fa;
      border-radius: 4px;
    }
    .answer {
      margin-top: 30px;
    }
  }
  .sideCard {
    flex: 1;
    margin-left: 10px;
  }
}
</style>